<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>ctp.ui.grid示例</title>
        <script type='text/javascript'>

            var CTP_WEB_FULLPATH ='../../';

        </script>
        <link href='../../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/groupbox.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/label.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/radiogroup.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/radio.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/checkboxgroup.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/checkbox.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/textfield.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/button.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/menus.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/grid.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/link.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/combobox.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/datepicker.css' rel='stylesheet' type='text/css'/>
		<link href='../../css/toolbar.css' rel='stylesheet' type='text/css'/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'></script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'></script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'></script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout-resize.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout-noresize.js'></script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'></script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'></script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'></script>
        <script type='text/javascript' src='../../js/ctp/groupbox/ctp.ui.groupbox.js'></script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'></script>
        <script type='text/javascript' src='../../js/ctp/label/ctp.ui.label.js'></script>
        <script type='text/javascript' src='../../js/ctp/radiogroup/ctp.ui.radiogroup.js'></script>
        <script type='text/javascript' src='../../js/ctp/radio/ctp.ui.radio.js'></script>
        <script type='text/javascript' src='../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js'></script>
        <script type='text/javascript' src='../../js/ctp/checkbox/ctp.ui.checkbox.js'></script>
        <script type='text/javascript' src='../../js/ctp/textfield/ctp.ui.textfield.js'></script>
        <script type='text/javascript' src='../../js/jquery/jquery.autocomplete.js'></script>
        <script type='text/javascript' src='../../js/ctp/button/ctp.ui.button.js'></script>
        <script type='text/javascript' src='../../js/ctp/currency/ctp.ui.currency.js'></script>
        <script type='text/javascript' src='../../js/ctp/toolbar/ctp.ui.toolbar.js'></script>
		<script type='text/javascript' src='../../js/ctp/combobox/ctp.ui.combobox.js'></script>
		<script type='text/javascript' src='../../js/ctp/menus/ctp.ui.menus.js'></script>
		<script type='text/javascript' src='../../js/ctp/datepicker/ctp.ui.datepicker.js'></script>
		<script type='text/javascript' src='../../js/ctp/datepicker/ui.datepicker.js'></script>
		<script type='text/javascript' src='../../js/ctp/link/ctp.ui.link.js'></script>
		<script type='text/javascript' src='../../js/ctp/statusbar/ctp.ui.statusbar.js'></script>
		<script type='text/javascript' src='../../js/ctp/plugin/ctp.editable.js'></script>					
		<script type='text/javascript' src='../../js/ctp/grid/ctp.ui.grid.js'></script>	
        <script type='text/javascript' kind='variant'>
        	//后台数据示例
        	var data = [{"totalNum":"12"},
        	        	{"itemId":"I001", "4textfield":"你好", "4currency":"12", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
	        				"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,tennis", "4checkboxgroup_dict":"篮球,网球", 
	        				"4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
	        			{"itemId":"I002", "4textfield":"你好", "4currency":"123", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
		        			"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"tennis,football", "4checkboxgroup_dict":"网球,足球", 
		        			"4radiogroup":"red", "4radiogroup_dict":"红色"},
	        			{"itemId":"I003", "4textfield":"你好", "4currency":"122", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
		        			"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,football,tennis", "4checkboxgroup_dict":"篮球,足球,网球", 
		        			"4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
		        		{"itemId":"I004", "4textfield":"你好", "4currency":"0.12", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
		        			"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball", "4checkboxgroup_dict":"篮球", 
		        			"4radiogroup":"blue", "4radiogroup_dict":"蓝色"},
		      			{"itemId":"I005", "4textfield":"你好", "4currency":"152", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
			      			"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"football", "4checkboxgroup_dict":"足球", 
			       			"4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
			        	{"itemId":"I006", "4textfield":"你好", "4currency":"12", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
				        	"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,football", "4checkboxgroup_dict":"篮球,足球", 
				        	"4radiogroup":"blue", "4radiogroup_dict":"蓝色"},
				        {"itemId":"I007", "4textfield":"你好", "4currency":"112", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
					    	"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,football", "4checkboxgroup_dict":"篮球,足球", 
					    	"4radiogroup":"red", "4radiogroup_dict":"红色"},
					    {"itemId":"I008", "4textfield":"你好", "4currency":"1", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
							"4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,tennis", "4checkboxgroup_dict":"篮球,网球", 
						     "4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
						{"itemId":"I009", "4textfield":"你好", "4currency":"1962", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
							 "4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"tennis,football", "4checkboxgroup_dict":"网球,足球", 
							 "4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
						{"itemId":"I010", "4textfield":"你好", "4currency":"12.0", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
							 "4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"tennis,football", "4checkboxgroup_dict":"网球,足球", 
							 "4radiogroup":"red", "4radiogroup_dict":"红色"},
						{"itemId":"I011", "4textfield":"你好", "4currency":"123", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
			        		 "4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,tennis", "4checkboxgroup_dict":"篮球,网球", 
			        	  	 "4radiogroup":"yellow", "4radiogroup_dict":"黄色"},
			        	{"itemId":"I012", "4textfield":"你好", "4currency":"12", "4datepicker":"2013-03-03", "4combobox":"1", "4combobox_dict":"激活",
				        	 "4checkbox":"1", "4checkbox_dict":"选中", "4checkboxgroup":"basketball,football,tennis", "4checkboxgroup_dict":"篮球,足球,网球", 
				        	 "4radiogroup":"yellow", "4radiogroup_dict":"黄色"}
        	        	];
        	var toolbar1;
        	var grid1;
        	var grid2;
        	var button1;
        	var button2;
        	var button3;
        	var button4;
        	var button5;
        	var button6;
        	var button7;
        	var button8;
        	var panel1;
        	var gridlayout1;
        	var borderlayout1;
        	var q = 1;
        	var validator1;
        		
        </script>
        <script type='text/javascript' kind='event'>
        	function validateFunc(val, rowid, colIdx){
        		var obj=grid2.editGetObj();
        		validator1.setTarget(obj);
        		validator1.refresh();
        		return validator1.submitValidate();
        	}
        </script>
        <script type='text/javascript' kind='ui'>

            $(document).ready(function(){
            	
            	validator1 = new ctp.validator({
            		id: 'validator1'
            	});

            	toolbar1 = new ctp.ui.toolbar({
        			id: 'toolbar1',
        			leftItems: [{
                        id: "button1",
                        type: 'button',
                        text: '新增可编辑行（配置了rowIdFieldName必须传值且不可为空，其他值可为空）',
                        icon: 'add',                        
                        onClick: function(){
                        
        					var id = "add" + q;
        					var dataObj = {"itemId":id, "4textfield":"", "4currency":"", "4datepicker":"", "4combobox":"", "4combobox_dict":"",
        	        				"4checkbox":"", "4checkbox_dict":"", "4checkboxgroup":"", "4checkboxgroup_dict":"", 
        	        				"4radiogroup":"", "4radiogroup_dict":""};
        					q++;
        					grid2.appendEditRow(dataObj);
        				}
                    }, '-', {
                        id: "button2",
                        type: 'button',
                        text: '删除选中行',
                        icon: 'delete',                        
                        onClick: function(){
        					
        					var _tmp = grid2.getSelectedRowId();
        					grid2.deleteEditRowByIds(_tmp);
        				}
                    }]
        		});
        		
            	grid1 = new ctp.ui.grid({
                	id: 'grid1',
                	title: '新可编辑插件示例(翻页表)——不支持行新增、删除',
                	width: '100%',
                	selectOnRow: false,
                	header: {
            			title:[
            				[{text:"选择"}, {text: "序号"}, {text: "ID"}, {text: "textfield例子"}, {text: "currency例子"}, {text: "datepicker例子(含校验)"}, {text: "combobox例子"}, {text: 'checkbox例子'}, {text: 'checkboxgroup例子'}, {text: 'radiogroup例子'}]
            			],
            			rowIdFieldName:"itemId",//此项必须配置且唯一，配置了之后这一列默认不可编辑
            			attr: [
                   			{colType:"checkbox"}, 
                   			{colType:"seqnum"}, 
                   			//因为之前配了rowIdFieldName为itemId，因此这里就算配了fieldType也是默认此列不可编辑
                   			{fieldName: "itemId", fieldType: "textfield"},
                   			//fieldAttr内的options是个对象，里面的内容是对应组件的配置项
            				{fieldName: "4textfield", fieldType:"textfield", fieldAttr:{options:{}}},
            				{fieldName: "4currency", fieldType:"currency", fieldAttr:{options:{}}},
            				//此处同上，特别说明只需要在这里配验证规则就可校验，无需另外创建validator
            				{fieldName: "4datepicker", fieldType:"datepicker", fieldAttr:{options:{validate: 'rules[required]'}}},
            				//此处同上，特别注意的是此处如果配的是combobox，需在后台数据中分别配置4combobox和4combobox_dict两个项，4combobox对应值，4combobox_dict对应文本。
            				//当页面修改4combobox_dict的文本，实际会同步修改4combobox和4combobox_dict分别对应的数据。
            				//如果不配置此项 的话则数据只修改fieldName的配置项。
            				//checkbox、checkboxgroup、radiogroup同理。
            				{fieldName: "4combobox_dict", fieldType:"combobox", fieldAttr:{options:{items:[{text:"激活", value:"1"}, {text:"冻结",value:"0"}]}}},
            				//注意，配置checkbox的话，选中则填入checkbox配置项中的label文本，取消选中则单元格不会填入任何东西
            				{fieldName: "4checkbox_dict", fieldType: "checkbox", fieldAttr:{options:{label: '选中', value: true}}},
            				{fieldName: "4checkboxgroup_dict", fieldType: "checkboxgroup", fieldAttr:{options:{items:[{id: 'checkbox1',label:'篮球', value:'basketball'},{id: 'checkbox2',label:'足球', value:'football'},{id: 'checkbox3',label:'网球', value:'tennis'}]}}},
            				{fieldName: "4radiogroup_dict", fieldType: "radiogroup", fieldAttr:{options:{items:[{id: 'radio1',label:'红色', value:'red'},{id: 'radio2',label:'蓝色', value:'blue'},{id: 'radio3',label:'黄色', value:'yellow'}]}}}
            			]
                	},
                	footer: {
                		showRows:5,
        				cacheRows:100
                    }
                });

            	grid2 = new ctp.ui.grid({
                	id: 'grid2',
                	title: '新可编辑插件示例(全量表)——支持行新增、删除',
                	width: '100%',
                	toolbar: toolbar1,
                	toolbarPos: 'innertop',
                	header: {
            			title:[
            				[{text:"选择"}, {text: "序号"}, {text: "ID"}, {text: "textfield例子"}, {text: "currency例子"}, {text: "datepicker例子(含校验)"}, {text: "combobox例子"}, {text: 'checkbox例子'}, {text: 'checkboxgroup例子'}, {text: 'radiogroup例子'}]
            			],
            			rowIdFieldName:"itemId",//此项必须配置，且配置了之后这一列默认不可编辑
            			attr: [
                   			{colType:"checkbox"}, 
                   			{colType:"seqnum"}, 
                   			//因为之前配了rowIdFieldName为itemId，因此这里就算配了fieldType也是默认此列不可编辑
                   			{fieldName: "itemId", fieldType: "textfield"},
                   			//fieldAttr内的options是个对象，里面的内容是对应组件的配置项
            				{fieldName: "4textfield", fieldType:"textfield", fieldAttr:{submitEvent: validateFunc, options:{validate: 'rules[required]'}}},
            				{fieldName: "4currency", fieldType:"currency", fieldAttr:{options:{}}},
            				//此处同上，特别说明只需要在这里配验证规则就可校验，无需另外创建validator
            				{fieldName: "4datepicker", fieldType:"datepicker", fieldAttr:{options:{validate: 'rules[required]'}}},
            				//此处同上，特别注意的是此处如果配的是combobox，需在后台数据中分别配置4combobox和4combobox_dict两个项，4combobox对应值，4combobox_dict对应文本。
            				//当页面修改4combobox_dict的文本，实际会同步修改4combobox和4combobox_dict分别对应的数据。
            				//如果不配置此项 的话则数据只修改fieldName的配置项。
            				//checkbox、checkboxgroup、radiogroup同理。
            				{fieldName: "4combobox_dict", fieldType:"combobox", fieldAttr:{options:{items:[{text:"激活", value:"1"}, {text:"冻结",value:"0"}]}}},
            				//注意，配置checkbox的话，选中则填入checkbox配置项中的label文本，取消选中则单元格不会填入任何东西
            				{fieldName: "4checkbox_dict", fieldType: "checkbox", fieldAttr:{options:{label: '选中', value: true}}},
            				{fieldName: "4checkboxgroup_dict", fieldType: "checkboxgroup", fieldAttr:{options:{items:[{id: 'checkbox1',label:'篮球', value:'basketball'},{id: 'checkbox2',label:'足球', value:'football'},{id: 'checkbox3',label:'网球', value:'tennis'}]}}},
            				{fieldName: "4radiogroup_dict", fieldType: "radiogroup", fieldAttr:{options:{items:[{id: 'radio1',label:'红色', value:'red'},{id: 'radio2',label:'蓝色', value:'blue'},{id: 'radio3',label:'黄色', value:'yellow'}]}}}
            			]
                	}
                });

                button1 = new ctp.ui.button({
                    id: 'button1',
                    width: '500px',
					text: '获取编辑后的行数据',
					onClick: function(){
						alert(grid1.getJsonVal());
					}
                });
                
                button2 = new ctp.ui.button({
                    id: 'button2',
                    width: '500px',
					text: '重置编辑后数据（清除）',
					onClick: function(){
						grid1.refreshJsonVal();
					}
                });

                button3 = new ctp.ui.button({
                    id: 'button3',
                    width: '500px',
					text: '获得编辑后数据（键值对形式）',
					onClick: function(){
						alert(grid1.editGetJsonVal());
					}
                });

                button4 = new ctp.ui.button({
                    id: 'button4',
                    width: '500px',
					text: '获得可编辑插件对象',
					onClick: function(){
						alert(grid1.editGetObj());
					}
                });

                button5 = new ctp.ui.button({
                    id: 'button5',
                    width: '500px',
					text: '关闭所有可编辑行',
					onClick: function(){
						grid1.closeAllEditRow();
					}
                });

                button6 = new ctp.ui.button({
                    id: 'button6',
                    width: '500px',
					text: '根据rowid撤销可编辑数据',
					onClick: function(){
						grid1.revokeEditRow();//（支持rowid数组，不输入参数则撤销当前页可编辑内容）
					}
                });

                button7 = new ctp.ui.button({
                    id: 'button7',
                    width: '500px',
					text: '当前页的可编辑行是否全部关闭',
					onClick: function(){
						alert(grid1.isAllRowClosed());//（全部关闭则return true；某一行没关闭则return当前没关闭的行rowid）
					}
                });

                button8 = new ctp.ui.button({
                    id: 'button8',
                    width: '500px',
					text: '支持取得编辑后合并数据或指定行（支持数组）的数据',
					onClick: function(){
						alert(grid1.getEditedData("I001","I004"));//（翻页表必须传参，全量表不传参默认取得全量数据）
					}
                });

                gridlayout1 = new ctp.ui.gridlayout({
                    id: 'gridlayout1',
                    width: '100%',
					align: 'center',
					height: '100%',
					cols: 3,
					items:[
						[{element: button1}, {element: button2}, {element: button3}],
						[{element: button4}, {element: button5}, {element: button6}],
						[{element: button7}, {element: button8}]
					]
                });

                panel1 = new ctp.ui.panel({
                    id: 'panel1',
                    width: '100%',
                    title: '新可编辑插件支持的方法（此处针对grid1, 翻页表）',
                    items:[gridlayout1]
                });
                
				borderlayout1 = new ctp.ui.borderlayout({
					id: 'borderlayout1',
					type: '3U',
					west__items: [grid1],
					//west__size: 0.3,
					center__items: [grid2],
					//center__size: 0.3,
					south__items: [panel1],
					//south__size: 0.4,
					renderTo: 'body'
				});

				grid1.fillData(data);
				grid2.fillData(data);
				
            }); 
        </script>
    </head>
    <body>

    </body>
</html>
